<script setup>
import * as echarts from "echarts";
import {ref, onMounted, toRefs, defineProps, defineEmits, reactive, defineExpose} from "vue";

const props = defineProps({
  reportData: {
    type: Object,
    default: () => ({}),
  },
  linkageStatus: {
      type: Boolean,
      default: false,
  },
});
const emits = defineEmits(['linkageParamsChange', 'linkageReset']);
const { reportData, linkageStatus } = toRefs(props);
const echartsList = ref([
  {
    label: '黄色问题线索',
    value: 'yellowEarlyWarning',
    data: [],
  },
  {
    label: '红色问题线索',
    value: 'redEarlyWarning',
    data: [],
  },
])
const xAxis = ref([]);
onMounted(() => {
  if(reportData.value?.length){
    xAxis.value = reportData.value.map(item => item.buName);
    echartsList.value[0].data = reportData.value.map(item => item.yellowEarlyWarning);
    echartsList.value[1].data = reportData.value.map(item => item.redEarlyWarning);
    option.value.xAxis[0].data = xAxis.value;
    option.value.series[0].data = echartsList.value[0].data;
    option.value.series[1].data = echartsList.value[1].data;
  }
  initEcharts();
});

const option = ref({
  grid: {
    top: '20px',
    left: '53px',
    right: 0,
    bottom: 0,
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      crossStyle: {
        color: '#999'
      }
    }
  },
  xAxis: [
    {
      data: xAxis.value,
      axisTick: false,
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '',
      axisLabel: {
        color: '#1B2A52',
        fontSize: 16,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
        }
      }
    },
    {
      type: 'value',
      name: '',
      axisLabel: {},
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
        }
      },
    }
  ],
  series: [
    {
      name: '黄色问题线索',
      type: 'bar',
      tooltip: {},
      barMaxWidth: 20,
      color: '#F99C34',
      data: [],
      stack: 'stack1',
      itemStyle: {
        color: (params) => {
          if (linkageParams.dataIndex === params.dataIndex && linkageParams.seriesIndex === params.seriesIndex) {
            return '#1890ff';
          } else {
            return '#F99C34';
          }
        }
      },
    },
    {
      name: '红色问题线索',
      type: 'bar',
      tooltip: {},
      color: '#DA0000',
      barMaxWidth: 20,
      data: [],
      stack: 'stack1',
      itemStyle: {
        color: (params) => {
          if (linkageParams.dataIndex === params.dataIndex && linkageParams.seriesIndex === params.seriesIndex) {
            return '#1890ff';
          } else {
            return '#DA0000';
          }
        }
      }
    }
  ]
})
var echartsDom = ref();
const initEcharts = () => {
  const myChart = echarts.init(echartsDom.value, 'default');
  window.addEventListener('resize', function () {
    myChart.resize();
  })
  option.value && myChart.setOption(option.value);
  myChart.on('click', function (params) {
    linkageParams.buCode =  reportData.value[params.dataIndex]?.buCode;
    linkageParams.dataIndex = params.dataIndex;
    linkageParams.seriesIndex = params.seriesIndex;
    linkageParams.seriesName = params.seriesName;
    linkageParams.name = params.name;
    emits('linkageParamsChange', linkageParams);
    myChart.setOption(option.value);
  })
};
const linkageParams = reactive({
  seriesIndex: null,
  dataIndex: null,
  name: null,
  seriesName: null,
  buCode: '50',
});
const renderKey = ref();
const reset = () => {
  Object.assign(linkageParams, {
    seriesIndex: null,
    dataIndex: null,
    name: null,
    seriesName: null,
    buCode: null,
  })
  emits('linkageReset');
  initEcharts();
};
defineExpose({
  reset,
})
</script>

<template>
  <div class="main-card grid-main-card">
    <div class="title">
      <card-title title="问题标段线索所属业务单元" style="width: 350px"></card-title>
      <a-button @click="reset" class="reset" type="link" :disabled="!linkageStatus">重置</a-button>
    </div>
    <div :key="renderKey" class="main-content">
      <div ref="echartsDom" class="echarts-dom"></div>
    </div>
    <div>
      <div v-for="item in echartsList" :key="item.value" class="target-item">
        <span class="label">{{ item.label }}</span>
        <span class="num" v-for="ele in item.data" :key="ele">
          <span class="num-item">{{ ele }}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.main-card {
  width: 100%;
  height: 100%;
}
.main-content {
  width: 100%;
  //display: flex;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.echarts-dom {
  width: 100%;
  height: 210px;
  position: relative;
}
.target-item {
  display: flex;
  margin-top: 10px;
  padding: 4px 0 4px 10px;
  border-radius: 52px;
  font-size: 12px;
  .label {
    width: 75px;
  }
  .num {
    flex: 1;
  }
  span {
    display: inline-block;
    text-align: center;
    color: #1B2A52;
  }
  &:first-child {
    background: #F99C341A;
    .label {
      color: #F99C34;
    }
  }
  &:last-child {
    background: #DA00001A;
    .label {
      color: #DA0000;
    }
  }
}
</style>
